<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />

    

    

    <title>用hexo搭建个人博客不要太简单！ | 郑礼德技术栈</title>
    <meta name="author" content="郑礼德" />
    <meta name="keywords" content="" />
    <meta name="description" content="上周闲的蛋疼，搭个自己的个人博客，养成写博客的好习惯从搭个自己的博客网站开始，没基础也可以搞搞。下载node到node官网下载，一直next 完成安装，然后使用node -v 提示版本信息即安装成功下载hexo打开window 命令行 npm install hexo-cli -g 安装hexo ,hexo 是一个快速搭建个人博客的工具，简直太好用了 hexo 以下提示即安装成功， 具体使用可以到hexo官网去看看创建博客项目到cmd 命令下 hexo init [proj..." />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />

    
    <link rel="alternate" href="/homepage/atom.xml" title="郑礼德技术栈" type="application/atom+xml">
    
    
    <link rel="icon" href="/homepage/images/favicon.ico">
    

    <style type="text/css">
    @font-face {
        font-family: 'icomoon';
        src: url("/homepage/fonts/icomoon.eot?q628ml");
        src: url("/homepage/fonts/icomoon.eot?q628ml#iefix") format('embedded-opentype'),
             url("/homepage/fonts/icomoon.ttf?q628ml") format('truetype'),
             url("/homepage/fonts/icomoon.woff?q628ml") format('woff'),
             url("/homepage/fonts/icomoon.svg?q628ml#icomoon") format('svg');
        font-weight: normal;
        font-style: normal;
    }
    </style>
    
<link rel="stylesheet" href="/homepage/css/style.css">


    <!--[if lt IE 9]>
    <style type="text/css">
    .nav-inner {top:0;}
    .author-meta {position:static;top:0;}
    .search-form {height:36px;}
    </style>
    <script type="text/javascript" src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <![endif]-->
<meta name="generator" content="Hexo 4.2.0"></head>
<body>

    <main class="app">
        <header id="header" class="header clearfix">
    <div id="nav" class="nav">
    <div class="nav-mobile">
        <button id="open-panel" class="open-panel nav-mobile-item"><i class="icon-documents"></i></button>
        <h1 class="nav-mobile-title nav-mobile-item">郑礼德技术栈</h1>
        <button id="open-menus" class="open-panel nav-mobile-item"><i class="icon-library"></i></button>
    </div>

    <nav id="nav-inner" class="nav-inner">
        
            <a class="nav-item" href="/homepage/">
                <span class="nav-text">首页</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/front-end">
                <span class="nav-text">前端</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/back-end">
                <span class="nav-text">后端</span>
            </a>
        
            <a class="nav-item" href="/homepage/categories/linux">
                <span class="nav-text">linux部署</span>
            </a>
        
            <a class="nav-item" href="/homepage/tags">
                <span class="nav-text">标签</span>
            </a>
        
            <a class="nav-item" href="/homepage/archives">
                <span class="nav-text">归档</span>
            </a>
        
            <a class="nav-item" href="/homepage/about">
                <span class="nav-text">关于</span>
            </a>
        
    </nav>
</div>

    <aside id="aside" class="aside">
    <div id="aside-mask" class="aside-mask"></div>
    <div id="aside-inner" class="aside-inner">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit"><i class="icon-search-stroke"></i></button><input type="hidden" name="sitesearch" value="http://zhenglide.gitee.io/homepage"></form>

        
        
        
        

        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#下载node"><span class="toc-number">1.</span> <span class="toc-text">下载node</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#下载hexo"><span class="toc-number">2.</span> <span class="toc-text">下载hexo</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#创建博客项目"><span class="toc-number">3.</span> <span class="toc-text">创建博客项目</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#挑选自己的主题"><span class="toc-number">4.</span> <span class="toc-text">挑选自己的主题</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#预览博客"><span class="toc-number">5.</span> <span class="toc-text">预览博客</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#申请码云，创建仓库"><span class="toc-number">6.</span> <span class="toc-text">申请码云，创建仓库</span></a><ol class="toc-child"><li class="toc-item toc-level-3"><a class="toc-link" href="#安装-hexo-deployer-git"><span class="toc-number">6.1.</span> <span class="toc-text">安装 hexo-deployer-git</span></a></li></ol></li><li class="toc-item toc-level-2"><a class="toc-link" href="#开启码云page-功能，完成发布"><span class="toc-number">7.</span> <span class="toc-text">开启码云page 功能，完成发布</span></a></li></ol>
        
    </div>
</aside>

</header>

        <div id="content" class="content">
            <div id="wrapper" class="wrapper" style="max-width: 800px">
                <article class="article" itemscope itemprop="blogPost">
    
    <header class="article-header">
        
        <h1 itemprop="name">
            用hexo搭建个人博客不要太简单！
        </h1>
        
        <div class="article-meta clearfix">
            <a class="article-date" href="http://zhenglide.gitee.io/homepage/2020/03/29/%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E4%B8%8D%E8%A6%81%E5%A4%AA%E7%AE%80%E5%8D%95%EF%BC%81/index.html">
    
    <i class="icon-calendar"></i>
    
    <time datetime="2020-03-29T15:59:43.000Z" itemprop="datePublished">2020-03-29</time>
</a>

            
<div class="article-tag-list">
    <i class="icon-tag"></i>
    <a class="article-tag-link" href="/homepage/tags/hexo/" rel="tag">hexo</a>
</div>


        </div>
    </header>
    
    <section class="article-body markdown-body">
        
        <p>上周闲的蛋疼，搭个自己的个人博客，养成写博客的好习惯从搭个自己的博客网站开始，没基础也可以搞搞。</p>
<a id="more"></a>

<h2 id="下载node"><a href="#下载node" class="headerlink" title="下载node"></a>下载node</h2><p>到<a href="https://nodejs.org/en/" target="_blank" rel="noopener">node官网</a>下载，一直next 完成安装，然后使用</p>
<p><code>node -v</code> 提示版本信息即安装成功</p>
<h2 id="下载hexo"><a href="#下载hexo" class="headerlink" title="下载hexo"></a>下载hexo</h2><p>打开window 命令行 <code>npm install hexo-cli -g</code> 安装hexo ,hexo 是一个快速搭建个人博客的工具，简直太好用了 <code>hexo</code> 以下提示即安装成功， 具体使用可以到<a href="https://hexo.io/zh-cn/docs/setup" target="_blank" rel="noopener">hexo官网</a>去看看</p>
<img src="/homepage/2020/03/29/%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E4%B8%8D%E8%A6%81%E5%A4%AA%E7%AE%80%E5%8D%95%EF%BC%81/hexo%E6%88%90%E5%8A%9F.png" class="">

<h2 id="创建博客项目"><a href="#创建博客项目" class="headerlink" title="创建博客项目"></a>创建博客项目</h2><p>到cmd 命令下 <code>hexo init [projectName]</code> [projectName] 是你的项目名，然后就会看到以下目录</p>
<img src="/homepage/2020/03/29/%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E4%B8%8D%E8%A6%81%E5%A4%AA%E7%AE%80%E5%8D%95%EF%BC%81/%E7%9B%AE%E5%BD%95%E7%BB%93%E6%9E%84.png" class="">

<h2 id="挑选自己的主题"><a href="#挑选自己的主题" class="headerlink" title="挑选自己的主题"></a>挑选自己的主题</h2><p>到<a href="https://hexo.io/themes/" target="_blank" rel="noopener">主题官网</a>上挑选主题，然后点击标题进去github 去下载下来，放到 themes 目录下解压</p>
<img src="/homepage/2020/03/29/%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E4%B8%8D%E8%A6%81%E5%A4%AA%E7%AE%80%E5%8D%95%EF%BC%81/%E4%B8%BB%E9%A2%98.png" class="">

<p>修改_config.yml 配置theme 改成对应的主题文件夹名称</p>
<pre><code class="yaml">theme: concise</code></pre>
<h2 id="预览博客"><a href="#预览博客" class="headerlink" title="预览博客"></a>预览博客</h2><p><code>hexo clean</code> 清除文件</p>
<p><code>hexo g</code> 生成html 文件</p>
<p><code>hexo s</code> 预览博客，加-p 可以指定端口</p>
<h2 id="申请码云，创建仓库"><a href="#申请码云，创建仓库" class="headerlink" title="申请码云，创建仓库"></a>申请码云，创建仓库</h2><p>申请自己的<a href="https://gitee.com/" target="_blank" rel="noopener">码云</a>，创建仓库，然后使用  hexo-deployer-git  工具上传</p>
{% asset_img gitee.png %}

<h3 id="安装-hexo-deployer-git"><a href="#安装-hexo-deployer-git" class="headerlink" title="安装 hexo-deployer-git"></a>安装 hexo-deployer-git</h3><p>在项目目录下执行 <code>npm install  hexo-deployer-git  --save</code> 安装插件</p>
<p>在_config.yml 配置发布仓库</p>
<pre><code class="yml">deploy:
  type: git
  repo: https://gitee.com/xxxxxxx.git
  branch: master</code></pre>
<p>安装<a href="https://git-scm.com/" target="_blank" rel="noopener">git</a></p>
<p>在目录下使用 <code>hexo d</code> 上传文件到gitee  注意： 每次发布注意要执行hexo clean 和hexo g</p>
<h2 id="开启码云page-功能，完成发布"><a href="#开启码云page-功能，完成发布" class="headerlink" title="开启码云page 功能，完成发布"></a>开启码云page 功能，完成发布</h2><img src="/homepage/2020/03/29/%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E4%B8%8D%E8%A6%81%E5%A4%AA%E7%AE%80%E5%8D%95%EF%BC%81/pages.png" class="">

<p>点击进去以后，点击部署，之后出现以下页面即成功</p>
<img src="/homepage/2020/03/29/%E7%94%A8hexo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2%E4%B8%8D%E8%A6%81%E5%A4%AA%E7%AE%80%E5%8D%95%EF%BC%81/pages%E6%88%90%E5%8A%9F.png" class="">



<p>之后就可以愉快的写博客了，在项目目录下 运行<code>hexo new 博客名称</code> 这样就会在source/_post 目录下创建博客之后就可以写了</p>
<p>最后感谢码云，感谢<a href="https://github.com/sanonz/hexo-theme-concise" target="_blank" rel="noopener">Concise</a> 这个主题的作者，开源让世界更美好！！！</p>

        
    </section>
</article>



<a id="pagenext" href="/homepage/2020/03/28/%E8%B6%85%E7%BA%A7%E5%A5%BD%E7%94%A8%E7%9A%84flex%E5%B8%83%E5%B1%80/" class="article-next" title="超级好用的flex布局"><i class="icon-arrow-right"></i></a>


<a id="pageprev" href="/homepage/2020/03/30/%E8%A7%A3%E5%86%B3idea%E6%97%A0%E6%B3%95%E8%AE%BF%E9%97%AE%E7%BD%91%E9%A1%B5%E9%97%AE%E9%A2%98/" class="article-prev" title="解决idea无法访问网页问题"><i class="icon-arrow-left"></i></a>




            </div>
        </div>
        <footer class="footer">
    Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>, Theme by <a href="https://github.com/sanonz/hexo-theme-concise" target="_blank">Concise</a>

    
    <script>
        var _hmt = _hmt || [];
        (function () {
            var hm = document.createElement("script");
            hm.src = "https://hm.baidu.com/hm.js?b13bb4c2ef8300062aab9732bd22eae0";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
        })();
    </script>
    
</footer>

    </main>

    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.9.0/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        var nodes = {
            nav: $('#nav'),
            aside: $('#aside'),
            asideInner: $('#aside-inner'),
            navInner: $('#nav-inner')
        };

        var doing = false;
        nodes.asideInner.on('webkitAnimationEnd mozAnimationEnd oAnimationEnd oanimationend animationend', function() {
            if (nodes.aside.hasClass('mobile-open')) {
                nodes.aside.removeClass('mobile-open');
            } else {
                nodes.aside.removeClass('mobile-close panel-show');
            }
            doing = false;
        });
        $('#open-panel, #aside-mask').on('click', function() {
            if (doing) {
                return;
            }

            if (nodes.aside.hasClass('panel-show')) {
                nodes.aside.addClass('mobile-close');
            } else {
                nodes.aside.addClass('mobile-open panel-show');
            }
        });
        $('#open-menus').on('click', function() {
            nodes.navInner.slideToggle();
        });

        if (window.innerWidth <= 960) {
            setTimeout(function() {
                nodes.navInner.slideUp();
            }, 3000);
        }
    });
    </script>
    
        
<script src="/homepage/js/scrollspy.min.js"></script>

        <script type="text/javascript">
        $(document.body).scrollspy({target: '#aside-inner'});

        $(window).on('resize', function() {
            var hw = $('#header').width();
            var ww = $('#wrapper').width();
            var space = ($(this).width() - hw - ww) / 2 / 2;

            var pageprev = $('#pageprev');
            var pagenext = $('#pagenext');
            var avg = (pageprev.width() + pagenext.width()) / 2

            if(space > avg) {
                var len = space - avg / 2;
                var styles = {position: 'fixed', top: '50%', marginTop: - (pageprev.width() + pagenext.width()) / 4}
                pageprev.css($.extend({left: hw + len}, styles));
                pagenext.css($.extend({right: len}, styles));
            } else {
                pageprev.removeAttr('style');
                pagenext.removeAttr('style');
            }
        }).trigger('resize');
        </script>
    

</body>
</html>
